diff --git a/keyserver/src/responders/website-responders.js b/keyserver/src/responders/website-responders.js
index c819bd7aa..9593affb8 100644
--- a/keyserver/src/responders/website-responders.js
+++ b/keyserver/src/responders/website-responders.js
@@ -1,734 +1,739 @@
 // @flow
 
 import html from 'common-tags/lib/html/index.js';
 import { detect as detectBrowser } from 'detect-browser';
 import type { $Response, $Request } from 'express';
 import fs from 'fs';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import * as React from 'react';
 // eslint-disable-next-line import/extensions
 import ReactDOMServer from 'react-dom/server';
 import t from 'tcomb';
 import { promisify } from 'util';
 
 import { baseLegalPolicies } from 'lib/facts/policies.js';
 import stores from 'lib/facts/stores.js';
 import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js';
 import { freshMessageStore } from 'lib/reducers/message-reducer.js';
 import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js';
 import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js';
 import {
   threadHasPermission,
   threadIsPending,
   parsePendingThreadID,
   createPendingThread,
 } from 'lib/shared/thread-utils.js';
 import { defaultWebEnabledApps } from 'lib/types/enabled-apps.js';
 import { entryStoreValidator } from 'lib/types/entry-types.js';
 import { defaultCalendarFilters } from 'lib/types/filter-types.js';
 import {
   defaultNumberPerThread,
   messageStoreValidator,
 } from 'lib/types/message-types.js';
 import { defaultEnabledReports } from 'lib/types/report-types.js';
 import { defaultConnectionInfo } from 'lib/types/socket-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { threadStoreValidator } from 'lib/types/thread-types.js';
 import {
   currentUserInfoValidator,
   userInfosValidator,
 } from 'lib/types/user-types.js';
 import { currentDateInTimeZone } from 'lib/utils/date-utils.js';
 import { ServerError } from 'lib/utils/errors.js';
 import { promiseAll } from 'lib/utils/promises.js';
 import { defaultNotifPermissionAlertInfo } from 'lib/utils/push-alerts.js';
 import { tBool, tNumber, tShape, tString } from 'lib/utils/validation-utils.js';
 import getTitle from 'web/title/getTitle.js';
 import { navInfoValidator } from 'web/types/nav-types.js';
 import { navInfoFromURL } from 'web/url-utils.js';
 
 import { fetchEntryInfos } from '../fetchers/entry-fetchers.js';
 import { fetchMessageInfos } from '../fetchers/message-fetchers.js';
 import { hasAnyNotAcknowledgedPolicies } from '../fetchers/policy-acknowledgment-fetchers.js';
 import { fetchThreadInfos } from '../fetchers/thread-fetchers.js';
 import {
   fetchCurrentUserInfo,
   fetchKnownUserInfos,
 } from '../fetchers/user-fetchers.js';
 import { getWebPushConfig } from '../push/providers.js';
 import { setNewSession } from '../session/cookies.js';
 import { Viewer } from '../session/viewer.js';
 import { streamJSON, waitForStream } from '../utils/json-stream.js';
 import { getAppURLFactsFromRequestURL } from '../utils/urls.js';
 import { validateOutput } from '../utils/validation-utils.js';
 
 const { renderToNodeStream } = ReactDOMServer;
 
 const access = promisify(fs.access);
 const readFile = promisify(fs.readFile);
 
 const googleFontsURL =
   'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Inter:wght@400;500;600&display=swap';
 const localFontsURL = 'fonts/local-fonts.css';
 async function getFontsURL() {
   try {
     await access(localFontsURL);
     return localFontsURL;
   } catch {
     return googleFontsURL;
   }
 }
 
 type AssetInfo = {
   +jsURL: string,
   +fontsURL: string,
   +cssInclude: string,
   +olmFilename: string,
   +sqljsFilename: string,
   +opaqueURL: string,
 };
 let assetInfo: ?AssetInfo = null;
 async function getAssetInfo() {
   if (assetInfo) {
     return assetInfo;
   }
   if (process.env.NODE_ENV === 'development') {
     const fontsURL = await getFontsURL();
     assetInfo = {
       jsURL: 'http://localhost:8080/dev.build.js',
       fontsURL,
       cssInclude: '',
       olmFilename: '',
       sqljsFilename: '',
       opaqueURL: 'http://localhost:8080/opaque-ke.wasm',
     };
     return assetInfo;
   }
   try {
     const manifestString = await readFile('../web/dist/manifest.json', 'utf8');
     const manifest = JSON.parse(manifestString);
     const webworkersManifestString = await readFile(
       '../web/dist/webworkers/manifest.json',
       'utf8',
     );
     const webworkersManifest = JSON.parse(webworkersManifestString);
     assetInfo = {
       jsURL: `compiled/${manifest['browser.js']}`,
       fontsURL: googleFontsURL,
       cssInclude: html`
         <link
           rel="stylesheet"
           type="text/css"
           href="compiled/${manifest['browser.css']}"
         />
       `,
       olmFilename: manifest['olm.wasm'],
       sqljsFilename: webworkersManifest['sql-wasm.wasm'],
       opaqueURL: `compiled/${manifest['comm_opaque2_wasm_bg.wasm']}`,
     };
     return assetInfo;
   } catch {
     throw new Error(
       'Could not load manifest.json for web build. ' +
         'Did you forget to run `yarn dev` in the web folder?',
     );
   }
 }
 
 let webpackCompiledRootComponent: ?React.ComponentType<{}> = null;
 async function getWebpackCompiledRootComponentForSSR() {
   if (webpackCompiledRootComponent) {
     return webpackCompiledRootComponent;
   }
   try {
     // $FlowFixMe web/dist doesn't always exist
     const webpackBuild = await import('web/dist/app.build.cjs');
     webpackCompiledRootComponent = webpackBuild.app.default;
     return webpackCompiledRootComponent;
   } catch {
     throw new Error(
       'Could not load app.build.cjs. ' +
         'Did you forget to run `yarn dev` in the web folder?',
     );
   }
 }
 
 const initialReduxStateValidator = tShape({
   navInfo: navInfoValidator,
   deviceID: t.Nil,
   currentUserInfo: currentUserInfoValidator,
   draftStore: t.irreducible('default draftStore', _isEqual({ drafts: {} })),
   sessionID: t.maybe(t.String),
   entryStore: entryStoreValidator,
   threadStore: threadStoreValidator,
   userStore: tShape({
     userInfos: userInfosValidator,
     inconsistencyReports: t.irreducible(
       'default inconsistencyReports',
       _isEqual([]),
     ),
   }),
   messageStore: messageStoreValidator,
   updatesCurrentAsOf: t.Number,
   loadingStatuses: t.irreducible('default loadingStatuses', _isEqual({})),
   calendarFilters: t.irreducible(
     'defaultCalendarFilters',
     _isEqual(defaultCalendarFilters),
   ),
+  communityPickerStore: t.irreducible(
+    'default communityPickerStore',
+    _isEqual({ chat: null, calendar: null }),
+  ),
   urlPrefix: tString(''),
   windowDimensions: t.irreducible(
     'default windowDimensions',
     _isEqual({ width: 0, height: 0 }),
   ),
   baseHref: t.String,
   notifPermissionAlertInfo: t.irreducible(
     'default notifPermissionAlertInfo',
     _isEqual(defaultNotifPermissionAlertInfo),
   ),
   connection: tShape({
     status: tString('connecting'),
     queuedActivityUpdates: t.irreducible(
       'default queuedActivityUpdates',
       _isEqual([]),
     ),
     actualizedCalendarQuery: tShape({
       startDate: t.String,
       endDate: t.String,
       filters: t.irreducible(
         'default filters',
         _isEqual(defaultCalendarFilters),
       ),
     }),
     lateResponses: t.irreducible('default lateResponses', _isEqual([])),
     showDisconnectedBar: tBool(false),
   }),
   watchedThreadIDs: t.irreducible('default watchedThreadIDs', _isEqual([])),
   lifecycleState: tString('active'),
   enabledApps: t.irreducible(
     'defaultWebEnabledApps',
     _isEqual(defaultWebEnabledApps),
   ),
   reportStore: t.irreducible(
     'default reportStore',
     _isEqual({
       enabledReports: defaultEnabledReports,
       queuedReports: [],
     }),
   ),
   nextLocalID: tNumber(0),
   cookie: t.Nil,
   deviceToken: t.Nil,
   dataLoaded: t.Boolean,
   windowActive: tBool(true),
   userPolicies: t.irreducible('default userPolicies', _isEqual({})),
   cryptoStore: t.irreducible(
     'default cryptoStore',
     _isEqual({
       primaryIdentityKeys: null,
       notificationIdentityKeys: null,
     }),
   ),
   pushApiPublicKey: t.maybe(t.String),
   _persist: t.Nil,
   commServicesAccessToken: t.Nil,
 });
 
 async function websiteResponder(
   viewer: Viewer,
   req: $Request,
   res: $Response,
 ): Promise<void> {
   const appURLFacts = getAppURLFactsFromRequestURL(req.originalUrl);
   const { basePath, baseDomain } = appURLFacts;
   const baseURL = basePath.replace(/\/$/, '');
   const baseHref = baseDomain + baseURL;
 
   const loadingPromise = getWebpackCompiledRootComponentForSSR();
   const hasNotAcknowledgedPoliciesPromise = hasAnyNotAcknowledgedPolicies(
     viewer.id,
     baseLegalPolicies,
   );
 
   let initialNavInfo;
   try {
     initialNavInfo = navInfoFromURL(req.url, {
       now: currentDateInTimeZone(viewer.timeZone),
     });
   } catch (e) {
     throw new ServerError(e.message);
   }
 
   const calendarQuery = {
     startDate: initialNavInfo.startDate,
     endDate: initialNavInfo.endDate,
     filters: defaultCalendarFilters,
   };
   const messageSelectionCriteria = { joinedThreads: true };
   const initialTime = Date.now();
 
   const assetInfoPromise = getAssetInfo();
   const threadInfoPromise = fetchThreadInfos(viewer);
   const messageInfoPromise = fetchMessageInfos(
     viewer,
     messageSelectionCriteria,
     defaultNumberPerThread,
   );
   const entryInfoPromise = fetchEntryInfos(viewer, [calendarQuery]);
   const currentUserInfoPromise = fetchCurrentUserInfo(viewer);
   const userInfoPromise = fetchKnownUserInfos(viewer);
 
   const sessionIDPromise = (async () => {
     if (viewer.loggedIn) {
       await setNewSession(viewer, calendarQuery, initialTime);
     }
     return viewer.sessionID;
   })();
 
   const threadStorePromise = (async () => {
     const [{ threadInfos }, hasNotAcknowledgedPolicies] = await Promise.all([
       threadInfoPromise,
       hasNotAcknowledgedPoliciesPromise,
     ]);
     return { threadInfos: hasNotAcknowledgedPolicies ? {} : threadInfos };
   })();
   const messageStorePromise = (async () => {
     const [
       { threadInfos },
       { rawMessageInfos, truncationStatuses },
       hasNotAcknowledgedPolicies,
     ] = await Promise.all([
       threadInfoPromise,
       messageInfoPromise,
       hasNotAcknowledgedPoliciesPromise,
     ]);
     if (hasNotAcknowledgedPolicies) {
       return {
         messages: {},
         threads: {},
         local: {},
         currentAsOf: 0,
       };
     }
     const { messageStore: freshStore } = freshMessageStore(
       rawMessageInfos,
       truncationStatuses,
       mostRecentMessageTimestamp(rawMessageInfos, initialTime),
       threadInfos,
     );
     return freshStore;
   })();
   const entryStorePromise = (async () => {
     const [{ rawEntryInfos }, hasNotAcknowledgedPolicies] = await Promise.all([
       entryInfoPromise,
       hasNotAcknowledgedPoliciesPromise,
     ]);
     if (hasNotAcknowledgedPolicies) {
       return {
         entryInfos: {},
         daysToEntries: {},
         lastUserInteractionCalendar: 0,
       };
     }
     return {
       entryInfos: _keyBy('id')(rawEntryInfos),
       daysToEntries: daysToEntriesFromEntryInfos(rawEntryInfos),
       lastUserInteractionCalendar: initialTime,
     };
   })();
   const userStorePromise = (async () => {
     const [userInfos, hasNotAcknowledgedPolicies] = await Promise.all([
       userInfoPromise,
       hasNotAcknowledgedPoliciesPromise,
     ]);
     return {
       userInfos: hasNotAcknowledgedPolicies ? {} : userInfos,
       inconsistencyReports: [],
     };
   })();
 
   const navInfoPromise = (async () => {
     const [{ threadInfos }, messageStore, currentUserInfo, userStore] =
       await Promise.all([
         threadInfoPromise,
         messageStorePromise,
         currentUserInfoPromise,
         userStorePromise,
       ]);
     const finalNavInfo = initialNavInfo;
 
     const requestedActiveChatThreadID = finalNavInfo.activeChatThreadID;
     if (
       requestedActiveChatThreadID &&
       !threadIsPending(requestedActiveChatThreadID) &&
       !threadHasPermission(
         threadInfos[requestedActiveChatThreadID],
         threadPermissions.VISIBLE,
       )
     ) {
       finalNavInfo.activeChatThreadID = null;
     }
 
     if (!finalNavInfo.activeChatThreadID) {
       const mostRecentThread = mostRecentlyReadThread(
         messageStore,
         threadInfos,
       );
       if (mostRecentThread) {
         finalNavInfo.activeChatThreadID = mostRecentThread;
       }
     }
 
     if (
       finalNavInfo.activeChatThreadID &&
       threadIsPending(finalNavInfo.activeChatThreadID) &&
       finalNavInfo.pendingThread?.id !== finalNavInfo.activeChatThreadID
     ) {
       const pendingThreadData = parsePendingThreadID(
         finalNavInfo.activeChatThreadID,
       );
       if (
         pendingThreadData &&
         pendingThreadData.threadType !== threadTypes.SIDEBAR &&
         currentUserInfo.id
       ) {
         const { userInfos } = userStore;
         const members = [...pendingThreadData.memberIDs, currentUserInfo.id]
           .map(id => {
             const userInfo = userInfos[id];
             if (!userInfo || !userInfo.username) {
               return undefined;
             }
             const { username } = userInfo;
             return { id, username };
           })
           .filter(Boolean);
         const newPendingThread = createPendingThread({
           viewerID: currentUserInfo.id,
           threadType: pendingThreadData.threadType,
           members,
         });
         finalNavInfo.activeChatThreadID = newPendingThread.id;
         finalNavInfo.pendingThread = newPendingThread;
       }
     }
 
     return finalNavInfo;
   })();
   const currentAsOfPromise = (async () => {
     const hasNotAcknowledgedPolicies = await hasNotAcknowledgedPoliciesPromise;
     return hasNotAcknowledgedPolicies ? 0 : initialTime;
   })();
 
   const pushApiPublicKeyPromise = (async () => {
     const pushConfig = await getWebPushConfig();
     if (!pushConfig) {
       if (process.env.NODE_ENV !== 'development') {
         console.warn('keyserver/secrets/web_push_config.json should exist');
       }
       return null;
     }
     return pushConfig.publicKey;
   })();
 
   const { jsURL, fontsURL, cssInclude, olmFilename, sqljsFilename, opaqueURL } =
     await assetInfoPromise;
 
   // prettier-ignore
   res.write(html`
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="utf-8" />
         <title>${getTitle(0)}</title>
         <base href="${basePath}" />
         <link rel="stylesheet" type="text/css" href="${fontsURL}" />
         ${cssInclude}
         <link
           rel="apple-touch-icon"
           sizes="180x180"
           href="apple-touch-icon.png"
         />
         <link
           rel="icon"
           type="image/png"
           sizes="32x32"
           href="favicon-32x32.png"
         />
         <link
           rel="icon"
           type="image/png"
           sizes="16x16"
           href="favicon-16x16.png"
         />
         <link rel="manifest" href="site.webmanifest" />
         <meta name="apple-mobile-web-app-title" content="Comm" />
         <meta name="application-name" content="Comm" />
         <meta name="msapplication-TileColor" content="#b91d47" />
         <meta name="theme-color" content="#b91d47" />
       </head>
       <body>
         <div id="react-root">
   `);
 
   const Loading = await loadingPromise;
   const reactStream = renderToNodeStream(<Loading />);
   reactStream.pipe(res, { end: false });
 
   await waitForStream(reactStream);
   res.write(html`
     </div>
     <script>
       var preloadedState =
   `);
 
   const initialReduxState = await promiseAll({
     navInfo: navInfoPromise,
     deviceID: null,
     currentUserInfo: currentUserInfoPromise,
     draftStore: { drafts: {} },
     sessionID: sessionIDPromise,
     entryStore: entryStorePromise,
     threadStore: threadStorePromise,
     userStore: userStorePromise,
     messageStore: messageStorePromise,
     updatesCurrentAsOf: currentAsOfPromise,
     loadingStatuses: {},
     calendarFilters: defaultCalendarFilters,
+    communityPickerStore: { chat: null, calendar: null },
     // We can use paths local to the <base href> on web
     urlPrefix: '',
     windowDimensions: { width: 0, height: 0 },
     baseHref,
     notifPermissionAlertInfo: defaultNotifPermissionAlertInfo,
     connection: {
       ...defaultConnectionInfo(viewer.platform ?? 'web', viewer.timeZone),
       actualizedCalendarQuery: calendarQuery,
     },
     watchedThreadIDs: [],
     lifecycleState: 'active',
     enabledApps: defaultWebEnabledApps,
     reportStore: {
       enabledReports: defaultEnabledReports,
       queuedReports: [],
     },
     nextLocalID: 0,
     cookie: undefined,
     deviceToken: null,
     dataLoaded: viewer.loggedIn,
     windowActive: true,
     userPolicies: {},
     cryptoStore: {
       primaryIdentityKeys: null,
       notificationIdentityKeys: null,
     },
     pushApiPublicKey: pushApiPublicKeyPromise,
     _persist: null,
     commServicesAccessToken: null,
   });
   const validatedInitialReduxState = validateOutput(
     viewer.platformDetails,
     initialReduxStateValidator,
     initialReduxState,
   );
   const jsonStream = streamJSON(res, validatedInitialReduxState);
 
   await waitForStream(jsonStream);
   res.end(html`
     ;
           var baseURL = "${baseURL}";
           var olmFilename = "${olmFilename}";
           var sqljsFilename = "${sqljsFilename}";
           var opaqueURL = "${opaqueURL}";
         </script>
         <script src="${jsURL}"></script>
       </body>
     </html>
   `);
 }
 
 const inviteSecretRegex = /^[a-z0-9]+$/i;
 
 async function inviteResponder(req: $Request, res: $Response): Promise<void> {
   const { secret } = req.params;
   const userAgent = req.get('User-Agent');
   const detectionResult = detectBrowser(userAgent);
   if (detectionResult.os === 'Android OS') {
     const isSecretValid = inviteSecretRegex.test(secret);
     const referrer = isSecretValid
       ? `&referrer=${encodeURIComponent(`utm_source=invite/${secret}`)}`
       : '';
     const redirectUrl = `${stores.googlePlayUrl}${referrer}`;
     res.writeHead(301, {
       Location: redirectUrl,
     });
     res.end();
     return;
   }
   const fontsURL = await getFontsURL();
   res.end(html`
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="utf-8" />
         <title>Comm</title>
         <link rel="stylesheet" type="text/css" href="/${fontsURL}" />
         <style>
           * {
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             box-sizing: border-box;
             padding: 0;
             margin: 0;
           }
 
           html {
             height: 100%;
             font-size: 112.5%;
           }
 
           body {
             font-family: 'Inter', -apple-system, 'Segoe UI', 'Roboto', 'Oxygen',
               'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
               ui-sans-serif;
             background: #0a0a0a url('/images/invite_link_background.png')
               no-repeat;
             background-size: cover;
             color: #ffffff;
             display: flex;
             flex-direction: column;
             justify-content: space-around;
             align-items: center;
             height: 100%;
             padding: 1.6rem;
             font-size: 1.8rem;
             line-height: 2.4rem;
             font-weight: 500;
           }
 
           section {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: space-between;
             width: 100%;
           }
 
           .card {
             width: 100%;
             padding: 3.2rem 1.6rem;
             gap: 4rem;
             background-color: #1f1f1f;
             border-radius: 1.6rem;
           }
 
           .buttons {
             gap: 1.2rem;
           }
 
           h1 {
             font-size: 3.6rem;
             line-height: 1.5;
             font-weight: 500;
             font-family: 'IBM Plex Sans', sans-serif;
           }
 
           p {
             text-align: center;
           }
 
           .separator {
             border: 1px solid #404040;
             width: 100%;
           }
 
           .button {
             all: unset;
             box-sizing: border-box;
             display: flex;
             justify-content: center;
             align-items: center;
             width: 100%;
             padding: 1.7rem;
             border-radius: 0.4rem;
             border: 1px solid transparent;
             background-color: #6d49ab;
             font-size: 1.6rem;
             line-height: 1.5;
           }
 
           .button.secondary {
             background-color: #1f1f1f;
             border-color: #ffffff;
           }
 
           .link {
             all: unset;
             box-sizing: border-box;
             display: flex;
             align-items: center;
           }
 
           .link-text {
             text-decoration-line: underline;
           }
 
           .logo-container {
             background-color: #0a0a0a;
             width: 4.2rem;
             height: 4.2rem;
             display: flex;
             justify-content: center;
             align-items: center;
             border-radius: 50%;
           }
 
           .logo {
             height: 2.6rem;
           }
 
           .arrow {
             width: 1.8rem;
             height: 1.8rem;
           }
         </style>
       </head>
       <body>
         <div></div>
         <section class="card">
           <section>
             <div class="logo-container">
               <img
                 src="/images/loading_logo.svg"
                 alt="Comm logo"
                 class="logo"
               />
             </div>
             <h1>Comm</h1>
           </section>
           <p>
             To join this community, download the Comm app and reopen this invite
             link
           </p>
           <div class="separator"></div>
           <section class="buttons">
             <a class="button" href="${stores.appStoreUrl}">Download Comm</a>
             <a class="button secondary" href="/invite/${secret}">
               Invite Link
             </a>
           </section>
         </section>
         <a class="link" href="https://comm.app/">
           <span class="link-text">Visit Comm’s website</span>
           <img
             src="/images/arrow_up_right.svg"
             alt="arrow up right"
             class="arrow"
           />
         </a>
       </body>
     </html>
   `);
 }
 
 export { websiteResponder, inviteResponder };
diff --git a/web/redux/redux-setup.js b/web/redux/redux-setup.js
index dd33883ff..1e7a0735c 100644
--- a/web/redux/redux-setup.js
+++ b/web/redux/redux-setup.js
@@ -1,338 +1,349 @@
 // @flow
 
 import invariant from 'invariant';
 import type { PersistState } from 'redux-persist/es/types.js';
 
 import {
   logOutActionTypes,
   deleteAccountActionTypes,
 } from 'lib/actions/user-actions.js';
 import baseReducer from 'lib/reducers/master-reducer.js';
 import { nonThreadCalendarFilters } from 'lib/selectors/calendar-filter-selectors.js';
 import { mostRecentlyReadThreadSelector } from 'lib/selectors/thread-selectors.js';
 import { isLoggedIn } from 'lib/selectors/user-selectors.js';
 import { invalidSessionDowngrade } from 'lib/shared/session-utils.js';
 import type { Shape } from 'lib/types/core.js';
 import type {
   CryptoStore,
   OLMIdentityKeys,
   PickledOLMAccount,
 } from 'lib/types/crypto-types.js';
 import type { DraftStore } from 'lib/types/draft-types.js';
 import type { EnabledApps } from 'lib/types/enabled-apps.js';
 import type { EntryStore } from 'lib/types/entry-types.js';
 import {
   type CalendarFilter,
   calendarThreadFilterTypes,
 } from 'lib/types/filter-types.js';
 import type { LifecycleState } from 'lib/types/lifecycle-state-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { MessageStore } from 'lib/types/message-types.js';
 import type { UserPolicies } from 'lib/types/policy-types.js';
 import type { BaseAction } from 'lib/types/redux-types.js';
 import type { ReportStore } from 'lib/types/report-types.js';
 import type { ConnectionInfo } from 'lib/types/socket-types.js';
 import type { ThreadStore } from 'lib/types/thread-types.js';
 import type { CurrentUserInfo, UserStore } from 'lib/types/user-types.js';
 import { setNewSessionActionType } from 'lib/utils/action-utils.js';
 import type { NotifPermissionAlertInfo } from 'lib/utils/push-alerts.js';
 
 import {
   updateWindowActiveActionType,
   setDeviceIDActionType,
   updateNavInfoActionType,
   updateWindowDimensionsActionType,
   updateCalendarCommunityFilter,
   clearCalendarCommunityFilter,
 } from './action-types.js';
 import {
   reduceCryptoStore,
   setPrimaryIdentityKeys,
   setNotificationIdentityKeys,
   setPickledNotificationAccount,
   setPickledPrimaryAccount,
 } from './crypto-store-reducer.js';
 import { reduceDeviceID } from './device-id-reducer.js';
 import reduceNavInfo from './nav-reducer.js';
 import { getVisibility } from './visibility.js';
 import { databaseModule } from '../database/database-module-provider.js';
 import { filterThreadIDsBelongingToCommunity } from '../selectors/calendar-selectors.js';
 import { activeThreadSelector } from '../selectors/nav-selectors.js';
 import { type NavInfo } from '../types/nav-types.js';
 import { workerRequestMessageTypes } from '../types/worker-types.js';
 
 export type WindowDimensions = { width: number, height: number };
 
+export type CommunityPickerStore = {
+  +chat: ?string,
+  +calendar: ?string,
+};
+
 export type AppState = {
   navInfo: NavInfo,
   deviceID: ?string,
   currentUserInfo: ?CurrentUserInfo,
   draftStore: DraftStore,
   sessionID: ?string,
   entryStore: EntryStore,
   threadStore: ThreadStore,
   userStore: UserStore,
   messageStore: MessageStore,
   updatesCurrentAsOf: number,
   loadingStatuses: { [key: string]: { [idx: number]: LoadingStatus } },
   calendarFilters: $ReadOnlyArray<CalendarFilter>,
-  calendarPickedCommunityID: ?string,
+  communityPickerStore: CommunityPickerStore,
   urlPrefix: string,
   windowDimensions: WindowDimensions,
   cookie?: void,
   deviceToken: ?string,
   baseHref: string,
   notifPermissionAlertInfo: NotifPermissionAlertInfo,
   connection: ConnectionInfo,
   watchedThreadIDs: $ReadOnlyArray<string>,
   lifecycleState: LifecycleState,
   enabledApps: EnabledApps,
   reportStore: ReportStore,
   nextLocalID: number,
   dataLoaded: boolean,
   windowActive: boolean,
   userPolicies: UserPolicies,
   cryptoStore: CryptoStore,
   pushApiPublicKey: ?string,
   _persist: ?PersistState,
   +commServicesAccessToken: ?string,
 };
 
 export type Action =
   | BaseAction
   | { type: 'UPDATE_NAV_INFO', payload: Shape<NavInfo> }
   | {
       type: 'UPDATE_WINDOW_DIMENSIONS',
       payload: WindowDimensions,
     }
   | {
       type: 'UPDATE_WINDOW_ACTIVE',
       payload: boolean,
     }
   | {
       type: 'SET_DEVICE_ID',
       payload: string,
     }
   | { +type: 'SET_PRIMARY_IDENTITY_KEYS', payload: ?OLMIdentityKeys }
   | { +type: 'SET_NOTIFICATION_IDENTITY_KEYS', payload: ?OLMIdentityKeys }
   | { +type: 'SET_PICKLED_PRIMARY_ACCOUNT', payload: ?PickledOLMAccount }
   | { +type: 'SET_PICKLED_NOTIFICATION_ACCOUNT', payload: ?PickledOLMAccount }
   | {
       +type: 'UPDATE_CALENDAR_COMMUNITY_FILTER',
       +payload: string,
     }
   | {
       +type: 'CLEAR_CALENDAR_COMMUNITY_FILTER',
       +payload: void,
     };
 
 export function reducer(oldState: AppState | void, action: Action): AppState {
   invariant(oldState, 'should be set');
   let state = oldState;
 
   if (action.type === updateWindowDimensionsActionType) {
     return validateState(oldState, {
       ...state,
       windowDimensions: action.payload,
     });
   } else if (action.type === updateWindowActiveActionType) {
     return validateState(oldState, {
       ...state,
       windowActive: action.payload,
     });
   } else if (action.type === updateCalendarCommunityFilter) {
     const nonThreadFilters = nonThreadCalendarFilters(state.calendarFilters);
 
     const threadIDs = Array.from(
       filterThreadIDsBelongingToCommunity(
         action.payload,
         state.threadStore.threadInfos,
       ),
     );
     return {
       ...state,
       calendarFilters: [
         ...nonThreadFilters,
         {
           type: calendarThreadFilterTypes.THREAD_LIST,
           threadIDs,
         },
       ],
-      calendarPickedCommunityID: action.payload,
+      communityPickerStore: {
+        ...state.communityPickerStore,
+        calendar: action.payload,
+      },
     };
   } else if (action.type === clearCalendarCommunityFilter) {
     const nonThreadFilters = nonThreadCalendarFilters(state.calendarFilters);
     return {
       ...state,
       calendarFilters: nonThreadFilters,
-      calendarPickedCommunityID: null,
+      communityPickerStore: {
+        ...state.communityPickerStore,
+        calendar: null,
+      },
     };
   } else if (action.type === setNewSessionActionType) {
     if (
       invalidSessionDowngrade(
         oldState,
         action.payload.sessionChange.currentUserInfo,
         action.payload.preRequestUserState,
       )
     ) {
       return oldState;
     }
     state = {
       ...state,
       sessionID: action.payload.sessionChange.sessionID,
     };
   } else if (
     (action.type === logOutActionTypes.success &&
       invalidSessionDowngrade(
         oldState,
         action.payload.currentUserInfo,
         action.payload.preRequestUserState,
       )) ||
     (action.type === deleteAccountActionTypes.success &&
       invalidSessionDowngrade(
         oldState,
         action.payload.currentUserInfo,
         action.payload.preRequestUserState,
       ))
   ) {
     return oldState;
   }
 
   if (
     action.type !== updateNavInfoActionType &&
     action.type !== setDeviceIDActionType &&
     action.type !== setPrimaryIdentityKeys &&
     action.type !== setNotificationIdentityKeys &&
     action.type !== setPickledPrimaryAccount &&
     action.type !== setPickledNotificationAccount
   ) {
     const baseReducerResult = baseReducer(state, action);
     state = baseReducerResult.state;
 
     const {
       storeOperations: { draftStoreOperations },
     } = baseReducerResult;
     if (draftStoreOperations.length) {
       (async () => {
         const isSupported = await databaseModule.isDatabaseSupported();
         if (!isSupported) {
           return;
         }
         await databaseModule.schedule({
           type: workerRequestMessageTypes.PROCESS_STORE_OPERATIONS,
           storeOperations: { draftStoreOperations },
         });
       })();
     }
   }
 
   state = {
     ...state,
     navInfo: reduceNavInfo(
       state.navInfo,
       action,
       state.threadStore.threadInfos,
     ),
     deviceID: reduceDeviceID(state.deviceID, action),
     cryptoStore: reduceCryptoStore(state.cryptoStore, action),
   };
 
   return validateState(oldState, state);
 }
 
 function validateState(oldState: AppState, state: AppState): AppState {
   if (
     (state.navInfo.activeChatThreadID &&
       !state.navInfo.pendingThread &&
       !state.threadStore.threadInfos[state.navInfo.activeChatThreadID]) ||
     (!state.navInfo.activeChatThreadID && isLoggedIn(state))
   ) {
     // Makes sure the active thread always exists
     state = {
       ...state,
       navInfo: {
         ...state.navInfo,
         activeChatThreadID: mostRecentlyReadThreadSelector(state),
       },
     };
   }
 
   const activeThread = activeThreadSelector(state);
   if (
     activeThread &&
     !state.navInfo.pendingThread &&
     state.threadStore.threadInfos[activeThread].currentUser.unread &&
     getVisibility().hidden()
   ) {
     console.warn(
       `thread ${activeThread} is active and unread, ` +
         'but visibilityjs reports the window is not visible',
     );
   }
   if (
     activeThread &&
     !state.navInfo.pendingThread &&
     state.threadStore.threadInfos[activeThread].currentUser.unread &&
     typeof document !== 'undefined' &&
     document &&
     'hasFocus' in document &&
     !document.hasFocus()
   ) {
     console.warn(
       `thread ${activeThread} is active and unread, ` +
         'but document.hasFocus() is false',
     );
   }
   if (
     activeThread &&
     !getVisibility().hidden() &&
     typeof document !== 'undefined' &&
     document &&
     'hasFocus' in document &&
     document.hasFocus() &&
     !state.navInfo.pendingThread &&
     state.threadStore.threadInfos[activeThread].currentUser.unread
   ) {
     // Makes sure a currently focused thread is never unread
     state = {
       ...state,
       threadStore: {
         ...state.threadStore,
         threadInfos: {
           ...state.threadStore.threadInfos,
           [activeThread]: {
             ...state.threadStore.threadInfos[activeThread],
             currentUser: {
               ...state.threadStore.threadInfos[activeThread].currentUser,
               unread: false,
             },
           },
         },
       },
     };
   }
 
   const oldActiveThread = activeThreadSelector(oldState);
   if (
     activeThread &&
     oldActiveThread !== activeThread &&
     state.messageStore.threads[activeThread]
   ) {
     // Update messageStore.threads[activeThread].lastNavigatedTo
     state = {
       ...state,
       messageStore: {
         ...state.messageStore,
         threads: {
           ...state.messageStore.threads,
           [activeThread]: {
             ...state.messageStore.threads[activeThread],
             lastNavigatedTo: Date.now(),
           },
         },
       },
     };
   }
 
   return state;
 }
diff --git a/web/selectors/calendar-selectors.js b/web/selectors/calendar-selectors.js
index 74cad5a4d..24c56849e 100644
--- a/web/selectors/calendar-selectors.js
+++ b/web/selectors/calendar-selectors.js
@@ -1,76 +1,76 @@
 // @flow
 
 import { createSelector } from 'reselect';
 
 import {
   useFilterThreadInfos as baseUseFilterThreadInfos,
   useFilterThreadSearchIndex as baseUseFilterThreadSearchIndex,
 } from 'lib/selectors/calendar-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import type SearchIndex from 'lib/shared/search-index.js';
 import { threadInFilterList } from 'lib/shared/thread-utils.js';
 import type { FilterThreadInfo } from 'lib/types/filter-types.js';
 import type { ThreadInfo, RawThreadInfo } from 'lib/types/thread-types.js';
 import { values } from 'lib/utils/objects.js';
 
 import type { AppState } from '../redux/redux-setup.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 function useFilterThreadInfos(): $ReadOnlyArray<FilterThreadInfo> {
   const calendarActive = useSelector(state => state.navInfo.tab === 'calendar');
   return baseUseFilterThreadInfos(calendarActive);
 }
 
 function useFilterThreadSearchIndex(): SearchIndex {
   const calendarActive = useSelector(state => state.navInfo.tab === 'calendar');
   return baseUseFilterThreadSearchIndex(calendarActive);
 }
 
 function filterThreadIDsBelongingToCommunity(
   communityID: string,
   threadInfosObj: { +[id: string]: ThreadInfo | RawThreadInfo },
 ): $ReadOnlySet<string> {
   const threadInfos = values(threadInfosObj);
   const threadIDs = threadInfos
     .filter(
       thread =>
         (thread.community === communityID || thread.id === communityID) &&
         threadInFilterList(thread),
     )
     .map(item => item.id);
   return new Set(threadIDs);
 }
 
 const filterThreadIDsBelongingToCommunitySelector: (
   state: AppState,
 ) => ?$ReadOnlySet<string> = createSelector(
-  (state: AppState) => state.calendarPickedCommunityID,
+  (state: AppState) => state.communityPickerStore.calendar,
   threadInfoSelector,
   (
     calendarPickedCommunityID: ?string,
     threadInfos: { +[id: string]: ThreadInfo },
   ) => {
     if (!calendarPickedCommunityID) {
       return null;
     }
     return filterThreadIDsBelongingToCommunity(
       calendarPickedCommunityID,
       threadInfos,
     );
   },
 );
 
-function useCommunityIsPicked(communityID: string): boolean {
+function useCommunityIsPickedCalendar(communityID: string): boolean {
   const calendarPickedCommunityID = useSelector(
-    state => state.calendarPickedCommunityID,
+    state => state.communityPickerStore.calendar,
   );
   return communityID === calendarPickedCommunityID;
 }
 
 export {
   useFilterThreadInfos,
   useFilterThreadSearchIndex,
   filterThreadIDsBelongingToCommunitySelector,
   filterThreadIDsBelongingToCommunity,
-  useCommunityIsPicked,
+  useCommunityIsPickedCalendar,
 };
diff --git a/web/selectors/thread-selectors.js b/web/selectors/thread-selectors.js
index dd783516a..3dffd4835 100644
--- a/web/selectors/thread-selectors.js
+++ b/web/selectors/thread-selectors.js
@@ -1,129 +1,129 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { ENSCacheContext } from 'lib/components/ens-cache-provider.react.js';
 import { useLoggedInUserInfo } from 'lib/hooks/account-hooks.js';
 import { createPendingSidebar } from 'lib/shared/thread-utils.js';
 import type {
   ComposableMessageInfo,
   RobotextMessageInfo,
 } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 function useOnClickThread(
   thread: ?ThreadInfo,
 ): (event: SyntheticEvent<HTMLElement>) => void {
   const dispatch = useDispatch();
   return React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       invariant(
         thread?.id,
         'useOnClickThread should be called with threadID set',
       );
       event.preventDefault();
       const { id: threadID } = thread;
 
       let payload;
       if (threadID.includes('pending')) {
         payload = {
           chatMode: 'view',
           activeChatThreadID: threadID,
           pendingThread: thread,
           tab: 'chat',
         };
       } else {
         payload = {
           chatMode: 'view',
           activeChatThreadID: threadID,
           tab: 'chat',
         };
       }
 
       dispatch({ type: updateNavInfoActionType, payload });
     },
     [dispatch, thread],
   );
 }
 
 function useThreadIsActive(threadID: string): boolean {
   return useSelector(state => threadID === state.navInfo.activeChatThreadID);
 }
 
 function useOnClickPendingSidebar(
   messageInfo: ComposableMessageInfo | RobotextMessageInfo,
   threadInfo: ThreadInfo,
 ): (event: SyntheticEvent<HTMLElement>) => mixed {
   const dispatch = useDispatch();
   const loggedInUserInfo = useLoggedInUserInfo();
 
   const cacheContext = React.useContext(ENSCacheContext);
   const { getENSNames } = cacheContext;
 
   return React.useCallback(
     async (event: SyntheticEvent<HTMLElement>) => {
       event.preventDefault();
       if (!loggedInUserInfo) {
         return;
       }
       const pendingSidebarInfo = await createPendingSidebar({
         sourceMessageInfo: messageInfo,
         parentThreadInfo: threadInfo,
         loggedInUserInfo,
         markdownRules: getDefaultTextMessageRules().simpleMarkdownRules,
         getENSNames,
       });
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           activeChatThreadID: pendingSidebarInfo.id,
           pendingThread: pendingSidebarInfo,
         },
       });
     },
     [loggedInUserInfo, messageInfo, threadInfo, dispatch, getENSNames],
   );
 }
 
 function useOnClickNewThread(): (event: SyntheticEvent<HTMLElement>) => void {
   const dispatch = useDispatch();
   return React.useCallback(
     (event: SyntheticEvent<HTMLElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: {
           chatMode: 'create',
           selectedUserList: [],
         },
       });
     },
     [dispatch],
   );
 }
 
 function useDrawerSelectedThreadID(): ?string {
   const activeChatThreadID = useSelector(
     state => state.navInfo.activeChatThreadID,
   );
   const pickedCommunityID = useSelector(
-    state => state.calendarPickedCommunityID,
+    state => state.communityPickerStore.calendar,
   );
   const inCalendar = useSelector(state => state.navInfo.tab === 'calendar');
 
   return inCalendar ? pickedCommunityID : activeChatThreadID;
 }
 
 export {
   useOnClickThread,
   useThreadIsActive,
   useOnClickPendingSidebar,
   useOnClickNewThread,
   useDrawerSelectedThreadID,
 };
diff --git a/web/sidebar/community-drawer-item-handlers.react.js b/web/sidebar/community-drawer-item-handlers.react.js
index c25ea295d..08ad34831 100644
--- a/web/sidebar/community-drawer-item-handlers.react.js
+++ b/web/sidebar/community-drawer-item-handlers.react.js
@@ -1,74 +1,74 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import type { CommunityDrawerItemHandler } from './community-drawer-item-handler.react.js';
 import { updateCalendarCommunityFilter } from '../redux/action-types.js';
-import { useCommunityIsPicked } from '../selectors/calendar-selectors.js';
+import { useCommunityIsPickedCalendar } from '../selectors/calendar-selectors.js';
 import {
   useOnClickThread,
   useThreadIsActive,
 } from '../selectors/thread-selectors.js';
 import type { NavigationTab } from '../types/nav-types.js';
 
 export type HandlerProps = {
   +setHandler: (handler: CommunityDrawerItemHandler) => void,
   +threadInfo: ThreadInfo,
 };
 
 function ChatDrawerItemHandler(props: HandlerProps): React.Node {
   const { setHandler, threadInfo } = props;
   const onClick = useOnClickThread(threadInfo);
   const isActive = useThreadIsActive(threadInfo.id);
 
   const handler = React.useMemo(
     () => ({ onClick, isActive }),
     [isActive, onClick],
   );
   React.useEffect(() => {
     setHandler(handler);
   }, [handler, setHandler]);
 
   return null;
 }
 
 function CalendarDrawerItemHandler(props: HandlerProps): React.Node {
   const { setHandler, threadInfo } = props;
   const dispatch = useDispatch();
 
   const onClick = React.useCallback(() => {
     dispatch({
       type: updateCalendarCommunityFilter,
       payload: threadInfo.id,
     });
   }, [dispatch, threadInfo.id]);
-  const isActive = useCommunityIsPicked(threadInfo.id);
+  const isActive = useCommunityIsPickedCalendar(threadInfo.id);
 
   const handler = React.useMemo(
     () => ({ onClick, isActive }),
     [onClick, isActive],
   );
   React.useEffect(() => {
     setHandler(handler);
   }, [handler, setHandler]);
 
   return null;
 }
 
 const communityDrawerItemHandlers: {
   +[tab: NavigationTab]: React.ComponentType<HandlerProps>,
 } = Object.freeze({
   chat: ChatDrawerItemHandler,
   calendar: CalendarDrawerItemHandler,
 });
 
 function getCommunityDrawerItemHandler(
   tab: NavigationTab,
 ): React.ComponentType<HandlerProps> {
   return communityDrawerItemHandlers[tab] ?? ChatDrawerItemHandler;
 }
 
 export { getCommunityDrawerItemHandler };